<!--
 * @Author: Li Zengkun
 * @Date: 2022-07-25 17:22:34
 * @LastEditors: Li Zengkun
 * @LastEditTime: 2022-08-10 22:11:23
 * @Description: 注册页
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../css/register.css">
    <link rel="stylesheet" href="../node_modules/font-awesome/css/font-awesome.min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Register</title>
</head>

<body>
    <div class="logo">
        <img src="../img/logo.png" alt="">
    </div>
    <!-- 注册表单 -->
    <form action="#">
        <span id="tip" class="tip">用户名不能为空</span>
        <input value="" id="username" name="name" type="text" placeholder="请输入用户名">
        <div for="gender" id="gender-box" class="gender">
            性别：
            <input type="radio" id="men" checked name="gender" value="男">
            <label for="men">男</label>
            <input type="radio" id="women" name="gender" value="女">
            <label for="women">女</label>
        </div>
        <input value="" id="password" name="password" type="text" placeholder="请输入密码">
        <input value="" id="repassword" name="repassword" type="text" placeholder="请再次输入密码">
        <div id="phonenum-box" class="phone-num">
            <select name="prefix-num" id="prefixNum">
                <option value="86">+86</option>
                <option value="86">+85</option>
                <option value="86">+84</option>
                <option value="86">+83</option>
            </select>
            <input value="" id="phonenum" name="phonenum" type="number" placeholder="手机号码">
        </div>
        <div class="captcha">
            <input type="text" id="captcha" name="captcha" placeholder="验证码">
            <a href="#">获取验证码</a>
        </div>
        <button type="button" id="submit" class="submit btn">注册</button>
        <a href="./login.html">返回登录</a>
    </form>
    <div class="bottom">注册即代表同意<a href="#">《本家网络服务协议》</a></div>
</body>

<script>
    let doc = document
    let oUsername = doc.querySelector("#username")
    let oPassword = doc.querySelector('#password')
    let oGenderBox = doc.querySelector('#gender-box')
    let oGender = doc.getElementsByName('gender')
    let oRePassword = doc.querySelector('#repassword')
    let oPhoneBox = doc.querySelector('#phonenum-box')
    let oPhone = doc.querySelector('#phonenum')
    let oCaptcha = doc.querySelector('#captcha')
    let oTip = doc.querySelector('#tip')
    let oSubmit = document.querySelector("#submit")

    oUsername.addEventListener('blur', checkUsername)
    oGenderBox.addEventListener('click', checkGender)
    oPassword.addEventListener('blur', checkPassword)
    oRePassword.addEventListener('blur', checkRePassword)
    oPhone.addEventListener('blur', checkPhone)

    // 用户名验证
    function checkUsername() {
        let username = oUsername.value.trim()
        if (!username) {
            openTip("用户名不能为空")
            oUsername.classList.add('error')
            return false
        }
        if (username.length > 20) {
            oUsername.classList.add('error')
            openTip("用户名最多20个字符")
            return false
        } else {
            oUsername.classList.add('success')
            return username
        }
    }

    // 性别验证
    function checkGender() {
        let gender
        oGender.forEach((item) => {
            if (item.checked) {
                gender = item.value
            }
        })
        return gender
    }
    // 密码验证
    function checkPassword() {
        let password = oPassword.value.trim()
        if (!password) {
            openTip("密码不能为空")
            oPassword.classList.add('error')
            return false
        }
        let reg = /([0-9]|[A-z]){6,14}$/
        let isValid = reg.test(password)

        if (!isValid) {
            oPassword.classList.add('error')
            openTip("密码为6到14位 英文字母 和 数字 的组合")
            return false
        } else {
            oPassword.classList.add('success')
            return password
        }
    }

    // 再次密码验证
    function checkRePassword() {
        let password = oRePassword.value.trim()
        if (!password) {
            openTip("请再次输入密码")
            oRePassword.classList.add('error')
            return false
        }

        if (!(password === oPassword.value.trim())) {
            oRePassword.classList.add('error')
            openTip("两次密码输入不一致")
            return false
        } else {
            oRePassword.classList.add('success')
            return password
        }

    }

    // 手机号验证
    function checkPhone() {
        let phone = oPhone.value
        if (!phone) {
            openTip("手机号码不能为空")
            oPhoneBox.style.borderColor = '#CB2634'
            return false
        }

        let reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
        let isValid = reg.test(phone)

        if (!isValid) {
            oPhoneBox.style.borderColor = '#CB2634'
            openTip("手机号错误")
            return false
        } else {
            oPhoneBox.style.borderColor = '#00b42a'
            return phone
        }
    }

    // 注册按钮
    oSubmit.addEventListener('click', () => {
        let username = checkUsername()
        let password = checkPassword()
        let rePassword = checkRePassword()
        let gender = checkGender()
        let phone = checkPhone()
        if (username && password === rePassword && password && rePassword && gender && phone) {
            register(username, password, gender, phone)
        }
    })

    // 提示
    function openTip(text) {
        oTip.style.display = 'inline-block'
        oTip.innerText = text
        console.log(text);
        setTimeout(() => {
            oTip.style.display = 'none'
        }, 3000)
    }




    function register(username, password, gender, phone) {
        let ajax = new XMLHttpRequest()
        ajax.open("POST", 'http://localhost:3002/user/register')
        ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        ajax.send(`username=${username.toString()}&password=${password.toString()}&sex=${gender.toString()}&tel=${phone.toString()}`)
        ajax.onreadystatechange = function() {
            if (this.readyState === 4) {
                let resp = JSON.parse(this.responseText)

                // 注册成功
                if (resp.status) {
                    // 提示
                    openTip(resp.msg + ",3秒后自动登录")
                    localStorage.setItem('token', resp.data.token)
                    setTimeout(() => {
                        window.location.href = "./index.html"
                    }, 3000)
                } else {
                    // 提示
                    openTip(resp.msg)
                }
            }
        }
    }
</script>




</html>